<template>
    <div>
        <el-container>
            <el-header>
                <div class="block" style="text-align: left">
                    <!-- <span class="demonstration">默认</span> -->
                    <el-date-picker
                    v-model="date_value"
                    type="date"
                    @change="dateChange"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="timestamp">
                    </el-date-picker>
                    <el-button type="danger" icon="el-icon-search" plain>查找</el-button>
                </div>
            </el-header>
            <el-main>
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                        prop="code"
                        label="商品编号"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="商品名称"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="price"
                        width="180"
                        label="商品价格">
                    </el-table-column>
                    <el-table-column
                        prop="spec"
                        width="180"
                        label="商品规格">
                    </el-table-column>
                    <el-table-column
                        prop="goods_num"
                        width="180"
                        label="销售数量">
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer>
                <!-- 分页 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="100">
                </el-pagination>
            </el-footer>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            currentPage: 1,
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
            },
            date_value: '',
            tableData: [
                {
                    code: '001001',
                    name: '华为P30 5G手机',
                    price: '4288.00',
                    spec: '8G 128G',
                    goods_num: 10
                },
                {
                    code: '001002',
                    name: '华为P40 5G手机',
                    price: '4788.00',
                    spec: '8G 128G',
                    goods_num: 9
                }, 
                {
                    code: '001003',
                    name: '华为Meta30 5G手机 保时捷',
                    price: '9899.00',
                    spec: '8G 256G',
                    goods_num: 15
                },
                {
                    code: '001004',
                    name: '华为Meta40 5G手机 保时捷',
                    price: '12899.00',
                    spec: '8G 256G',
                    goods_num: 20
                },
                {
                    code: '001005',
                    name: '华为Meta40 5G手机 保时捷',
                    price: '16899.00',
                    spec: '12G 512G',
                    goods_num: 5
                }, 
            ]
        }
    },
    methods: {
        dateChange() {
            console.log(this.date_value)
        },
        // 分页的方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    },
    created() {

    }
}
</script>

<style scoped>

</style>
